<template>
  <div class="page page-full page-stadium-list has-headbar">
    <head-bar title="场馆选择" :prevRoute="{name: 'stadium-home'}" />
    <div class="drop-menu">
      <div class="drop-menu-bar">
        <template v-for="(item, index) in menuData">
           <div
           :key="index"
           :class="['bar-item', {active: index == activeMenuBarIndex}]"
           @click="barItemClick($event, item, index)"
           ><span>{{item.text}}</span></div>
        </template>
      </div>
      <van-popup class="drop-menu-popup" position="top" :value="isPopupShow" @click-overlay="menuPopupOverlayClick">
        <div class="menu-drop-list">
          <template  v-for="(item, index) in activeMenuListData">
            <button class="select-item"
            :class="{active: item.value === selectedMenuListValue[activeMenuBarIndex].value}"
            :key='index'
            @click="listItemClick($event, item, index)"
            >{{item.name}}</button>
          </template>
        </div>
      </van-popup>

    </div>
    <van-pull-refresh class="pullrefresh-box" v-model="refreshLoading" @refresh="onRefresh">
      <van-list
        class="list-container"
        v-model="moreLoading"
        :finished="moreFinished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad">
          <stadium-item :key="index" v-for="(item, index) in list" :itemData="item"></stadium-item>
          <!-- <empty-data :empty="list.length === 0 && !moreLoading"></empty-data> -->
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import StadiumItem from './components/StadiumItem'
import { Popup } from 'vant'
import { API_SPORT_TYPES, API_VENUES_LIST } from '@/service/veneue'
import { API_REGION_INFO } from '@/service/region'
import { mapGetters } from 'vuex'
import { wxjsdkMixin } from '@/components/mixins'
export default {
  mixins: [wxjsdkMixin],
  name: 'stadium-list',
  components: {
    StadiumItem,
    [Popup.name]: Popup
  },
  data () {
    return {
      list: [],
      menuData: [
        {
          name: 'region',
          text: '区域',
          options: []
        },
        {
          name: 'sort',
          text: '排序',
          options: [
            {
              value: 0,
              name: '距离'
            },
            {
              value: 1,
              name: '口碑'
            }
          ]
        },
        {
          name: 'sportsType',
          text: '类目',
          options: []
        }
      ],
      isPopupShow: false,
      activeMenuBarIndex: -1, // bar
      activeMenuListData: [], // 展开的菜单选项数据
      selectedMenuListValue: [
        { // 区域
          name: '',
          value: 0
        },
        { // 排序
          name: '',
          value: 0
        },
        { // 类目
          name: '',
          value: ''
        }
      ], // 选择的选项值
      loading: false, // 加载状态
      refreshLoading: false, // 下拉刷新loading状态
      moreLoading: false,
      moreFinished: false,
      pageNumber: 0,
      pageSize: 8
    }
  },
  watch: {
    isPopupShow (val, oldVal) {
      if (!val) {
        this.activeMenuBarIndex = -1
        this.activeMenuListData = []
      }
    },
    userPosition: {
      handler (newValue) {
        this.pageNumber = 0
        let reqData = {
          pageNumber: this.pageNumber + 1,
          pageSize: this.pageSize,
          lon: this.userPosition.lng,
          lat: this.userPosition.lat,
          regionId: this.selectedMenuListValue[0].value,
          sort: this.selectedMenuListValue[1].value,
          sportsTypeId: this.selectedMenuListValue[2].value
        }
        API_VENUES_LIST(reqData).then((resData) => {
          let { resultList, totalSize } = resData.list
          if (resultList.length === 0) {
            this.moreFinished = true
            this.list = []
          } else {
            this.pageNumber = this.pageNumber + 1
            this.list = resultList
            if (totalSize === this.list.length) {
              this.moreFinished = true
            } else {
              this.moreFinished = false
            }
          }
        }).catch(() => {
          this.moreFinished = true
          this.list = []
        }).finally(() => {
          this.refreshLoading = false
        })
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters({
      userPosition: 'getUserPosition'
    }),
    paramTypeId () {
      return parseInt(this.$route.params.id)
    }
  },
  mounted () {
    this.wechatHideMenu()
    this.$set(this.selectedMenuListValue, 2, { name: '', value: this.paramTypeId })
    this.requestRegiionInfo()
    this.requestSportsTypes().finally(() => {
      this.moreLoading = true
      this.requestDataList((resData) => {
        this.list = resData.list.resultList
      }).finally(() => {
        this.moreLoading = false
      })
    })
  },
  methods: {
    // 请求区域
    requestRegiionInfo () {
      return API_REGION_INFO().then((resData) => {
        this.menuData[0].options = resData.list.map((item) => {
          return {
            value: item.regionid,
            name: item.regionname
          }
        })
      })
    },
    // 请求类目
    requestSportsTypes () {
      return API_SPORT_TYPES({ isFree: 0 }).then(resData => {
        this.menuData[2].options = resData.list.map((item) => {
          return {
            value: item.sportsTypeId,
            name: item.sportsName
          }
        })
        this.$set(this.selectedMenuListValue, 2, this.menuData[2].options.find(item => {
          return item.value === parseInt(this.paramTypeId)
        }))
      })
    },
    // 请求数据
    requestDataList (callback) {
      this.loading = true
      let reqData = {
        pageNumber: this.pageNumber + 1,
        pageSize: this.pageSize,
        lon: this.userPosition.lng,
        lat: this.userPosition.lat,
        regionId: this.selectedMenuListValue[0].value,
        sort: this.selectedMenuListValue[1].value,
        sportsTypeId: this.selectedMenuListValue[2].value
      }
      return API_VENUES_LIST(reqData).then((resData) => {
        let { resultList, totalSize } = resData.list
        if (resultList.length <= 0) {
          this.moreFinished = true
        } else {
          this.pageNumber = this.pageNumber + 1
          callback && callback(resData)
          if (totalSize === this.list.length) {
            this.moreFinished = true
          }
        }
      }).catch(() => {
        this.moreFinished = true
      }).finally(() => {
        this.loading = false
      })
    },
    // 菜单点击事件
    barItemClick (e, item, index) {
      if (!item) return
      if (index === this.activeMenuBarIndex) {
        this.isPopupShow = !this.isPopupShow
      } else {
        this.isPopupShow = false
        this.isPopupShow = true
        this.activeMenuBarIndex = index
        this.activeMenuListData = item.options
      }
    },
    // 选项点击事件
    listItemClick (e, item, index) {
      console.log('itemlick')
      this.$set(this.selectedMenuListValue, this.activeMenuBarIndex, item)
      this.isPopupShow = false
      this.pageNumber = 0
      this.list = []
      this.requestDataList((resData) => {
        // console.log(resData)
        this.list = resData.list.resultList
      })
    },
    menuPopupOverlayClick () {
      this.isPopupShow = false
      this.pageNumber = 0
      this.requestDataList(resData => {
        // console.log(resData)
        this.list = resData.list.resultList
      })
    },
    onRefresh () {
      if (this.loading) return
      this.loading = true
      this.pageNumber = 0
      let reqData = {
        pageNumber: this.pageNumber + 1,
        pageSize: this.pageSize,
        lon: this.userPosition.lng,
        lat: this.userPosition.lat,
        regionId: this.selectedMenuListValue[0].value,
        sort: this.selectedMenuListValue[1].value,
        sportsTypeId: this.selectedMenuListValue[2].value
      }
      API_VENUES_LIST(reqData).then((resData) => {
        let { resultList, totalSize } = resData.list
        if (resultList.length === 0) {
          this.moreFinished = true
          this.list = []
        } else {
          this.pageNumber = this.pageNumber + 1
          this.list = resultList
          if (totalSize === this.list.length) {
            this.moreFinished = true
          } else {
            this.moreFinished = false
          }
        }
      }).catch(() => {
        this.moreFinished = true
        this.list = []
      }).finally(() => {
        this.refreshLoading = false
        this.loading = false
      })
    },
    onLoad () {
      if (this.loading || this.refreshLoading) return
      this.requestDataList((resData) => {
        let { resultList } = resData.list
        this.list = [...this.list, ...resultList]
      }).finally(() => {
        this.moreLoading = false
      })
    }
  }
}
</script>

<style lang="less">
  @dropMenuHeight: 78/2px;
  .page-stadium-list{
    &.has-headbar{
      padding-top: @dropMenuHeight + @headBarHeight;
    }
    .list-container{
      overflow: hidden;
      min-height: calc(100vh - @headBarHeight - 200px);
    }
  }
  .drop-menu{
    position: fixed;
    z-index: 99;
    top: @headBarHeight;
    left: 0;
    right: 0;
    box-sizing: border-box;

    .drop-menu-bar{
      display: flex;
      font-size: 15px;
      color: #353434;
      height: @dropMenuHeight;
      background-color: #fff;
      position: relative;
      z-index: 2;

      .bar-item{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        span{
          display: block;
          padding-right: 32/2px;
          position: relative;
          font-weight: bold;

          &:after {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            width: 0;
            height: 0;
            margin-top: -4.5/2px;
            border-left: 17/4px solid transparent;
            border-right: 17/4px solid transparent;
            border-top: 9/2px solid #666;
            transition: transform .3s cubic-bezier(.86,0,.07,1), -webkit-transform .3s cubic-bezier(.86,0,.07,1);
          }
        }

        &.active{
          span{
            color: @colorPrimary;
          }
          span:after{
            transform: rotate(180deg);
          }
        }
      }
    }

    .drop-menu-popup{
      z-index: 1!important;
      padding-top: @dropMenuHeight + @headBarHeight;

      .menu-drop-list{
        background-color: #fff;
        font-size: 14px;
        padding: 12px 25px;
        .select-item {
          padding: 5px 8px;
          border: none;
          background-color: #fff;
          margin-bottom: 7px;
          margin-right: 6px;
          margin-left: 6px;
          &.active{
            color: @colorPrimary;
          }
        }
      }
    }
    .van-modal{
      z-index: 0!important;
      background-color: rgba(0, 0 , 0, 0.33);
    }
  }
</style>
